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M-r interfaces (UIs) are the most visible and, conse- 
quently, the most frequently changed part of any 
^::ip^ appiie^tion. Tracking these changes makes client 
GUI development one of the most labor-intensive parts of 
system development and maintenance. This is compound- 
ed by the industry trend toward personalization, which 
drastically increases the complexity of GUI development 
as users may require different views based on preferences 
or role. 

Most of these headaches of GUI development would be 
a thing of the past if the GUI could be defined by some kind 
of a specification instead of large amounts of code. This arti- 
cle introduces XMLTalk, an application framework that lets 
programmers specify the application's UI in an Extensible 
Markup Language (XML) file, instead of hundreds or poten- 
tially thousands of lines of Java code. The framework uses 

16 Java" Report I October 2001 



By Frank Sauer 

key concepts from both the Java and Smalltalk 1 program- 
ming languages to aid in the automatic rendering of UIs 
using a set of predefined models and widgets. 

XMLTalk applications follow the model-view-controller 
(MVC) paradigm, and both the models and the views are 
specified in the XML specification. In addition — and this is 
the key to XMLTalk — the connections between the views 
(widgets) and their models are also specified in the XML. 
This dramatically reduces the amount of code required to 
develop UI applications. The models used in XMLTalk 
are ValueModels, a concept originating in Visualworks' 
Smalltalk in the early 1980s. The framework contains a 
number of implementations of this very simple interface, 
namely ValueHolder, AspectAdaptor, SelectionlnList, 
RangeAdaptor, and others. Complex application behavior 
can be achieved simply by connecting ValueModel objects 

http://www.javareport.com 
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together in various ways. These connections are also speci- 
fied in the XML specification. 

XMLTalk supports the entire range of Swing widgets. 
Views are laid out using layout managers, such as 
BorderLayout, GridBagLayout, and others. XMLTalk pro- 
vides several enhancements to JTable, JTree, and other 
complex Swing widgets, such as striped tables, tree nodes 
with individual icons and support for drag and drop, 
input validation, and field formatting for both input fields 
and table editors. 

Every application developed with XMLTalk becomes a 
component that can be used in another (or the same) 
XMLTalk application in the form of a window, dialog, inner 
frame, tab in a TabPanel, or simply an embedded Panel. For 
example, an address entry panel can be written once and 
reused in many applications. Applications provide the 
framework with an URL to their XML GUI specification, so 
the XML is not restricted to residing locally on the machine 
rendering the GUI, but could be obtained from a server 
where it is generated based on conditions, such as the user's 
security profile or personal preferences. 

The XMLTalk framework contains three key packages: 
the ValueModel package that implements the various 
ValueModels; the widgets package, which specializes some 
of the more complex Swing widgets; and the XML UI 
builder, which reads the XML specifications and con- 
structs the GUI from it. Applications using the framework 
extend the abstract ApplicationModel class of the frame- 
work and specify where the XML GUI specification can be 
found by implementing an abstract method defined in 
ApplicationModel (see Figure 1). 

XMLTalk contains a Document Type Descriptor (DTD) 
that constrains valid content of the Ul specifications. (The 
complete source code for this article is available at the code 
section of www.javareport.com.) The XML GUI builder 
reads the specification, optionally validates it, and builds 
the models, actions, and views contained in it. All elements 
in the specification are named and the builder constructs 
data structures where these elements can be found by name 
when they are later referenced from the XML. When the 
builder is constructing the widgets, it automatically con- 
nects them to the previously built models. Application pro- 
grammers can also find models, actions, and widgets by 
using those same names in their code. 

To get a better understanding of this process, let's exam- 
ine a simple example application — the Java code, the XML 
specification, and the resulting UI. 

Consider the UI shown in Figure 1. All the sliders, progress 
indicators, and scrollbars move in a synchronized manner. 
When you move one, all of the others move with it. In addi- 
tion, each of these components is constrained by a mini- 
mum and maximum value, which can be set by typing them 
in the input fields labeled "Min:" and "Max:". Typing a 
value in the input field labeled "Value:" makes all the slid- 
ers and scrollbars move to that position. The input field 
labeled "Extent:" controls the width of the scrollbar extents. 
(See Listing 1 for the Java code for this application.) 

http://www.javareport.com 




Figure 1. Overview of XMLTalk architecture. 



An independently developed standard Swing version 
that implements the described behavior contains 230 lines 
of code and 20 instance variables. How can 10 lines of code 
in Listing 1 achieve the same functionality? The answer is 
ValueModels. To explain the concept of ValueModels in 
more detail, here is an excerpt from the XML specification 
for the application shown in Listing 1. 

<M0DELS> 
<VALUEHOLDER name="mir«7> 
<VALUEHOLDER name="max7> 
<VALUEHOLDER name="extent7> 
<VALUEHOLDER name="value7> 
<RANGEADAPTOR name="range" 

exteritholder="extent" 

maxholder="max" 

minholder="rflin" 

valueholder="value7> 

</M0DELS> 

This XML code snippet defines four ValueHolder objects 
LISTING 1 

The complete Java source code for the Slider example. 

public class SliderExample 

extends ApplicationModel { 

; public static void main (String argv[ ] ) { 
(new SliderExampie())-open(); 

■ i ' 

public void windowClosedQ { 
System.exit(l); 

}• . 

v^iet™ 

getClass():getResource( 

vstiderexarapleixmr); . 

•r:l-'- •• : : "- 

x&sns^ J 
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figure 2. Models and connections for the Slider example. 



and one RangeAdaptor object. The RangeAdaptor object 
refers to the ValueHolder objects by name. So, what are 
these ValueHolder and RangeAdaptor objects? They are 
implementations of an abstract class called ValueModel, 
which is an invisible Java bean with a single bound proper- 
ty of type Object named "value." 

This translates to a ValueModel being an object that 
has a getValue() method, a setValue(Object) method, and 
the important capability of firing a PropertyChangeEvent 
every time the setValue(Object) method is called. This fir- 
ing of events when the value of a ValueModel changes is 
one of the most important factors that makes XMLTalk 
work. Recipients of the event implement the Property- 
ChangeListener defined in the standard Java JDK (1.1 and 
up). All ValueModel implementations and widgets defined 
in XMLTalk implement this interface, which allows them 
to receive these events. 

This event propagation mechanism allows Value-Model 
objects to be connected together in various useful ways. In 
the code snippet on page 17, the RangeAdaptor is connect- 
ed to four ValueHolder objects and is notified each time 
an object changes its value. On the other side, the 
ValueHolders are connected to the input fields, and the (sin- 
gle) RangeAdaptor is connected to all other widgets (sliders, 
progress bars, and scrollbars). These widgets refer to the 
ValueModels as their model. Because the widgets are con- 
nected to the models, they will also receive the 
PropertyChangeE vents as they occur. 

Putting all this together enables the following scenario: 
A user types the value 40 in the input field labeled "Value:". 
The input field will set the value in its model, the 
ValueHolder named "value." In turn, the ValueHolder will 
fire the PropertyChangeEvent, indicating its value has 
changed. The RangeAdaptor receives the event and fires an 
event of its own to indicate its current value has changed. 
This event is received by all the sliders, progressbars, and 
scrollbars that make them move to position 40. 

Figure 2 shows how all the models and widgets are con- 
nected. The blue arrows indicate the associations between 
the various models and widgets, while the red arrows show 
the flow of PropertyChangeEvents after the user types the 
value 40 in the value input field. 

Listing 2 is the remainder of the XML UI specification, 
showing how the widgets are laid out, as well as how they 
refer to their models. 

Java GUI programmers familiar with Swing will recog- 
nize most of the attributes in this XML specification as the 
usual properties one can set on the various Swing widgets. 
The <CONSTRAINTS> element in every widget specifica- 
tion defines the layout manager constraints that define the 
layout of each widget within its parent container. In this 
case, since the <VIEW> uses the <GRIDBAGLAYOUT> 
layout manager, the <CONSTRAINTS> element contains 
<GRIDBAG> constraints. Different layout managers will use 
different <CONSTRAINTS> elements, for example <BOR- 
DER side="North"> can be used with a <BORDER> layout 
manager. In addition to the standard Swing attributes, 
XMLTalk gives each widget the mode] attribute, which finks 
the widget to one of the models specified in the <MODELS> 



section of the specification. 

Listing 2 demonstrates the powerful concept of connect- 
ing very simple ValueModel objects together into more 
complex models that can drive the entire Ul with the appli- 
cation, without requiring a single line of Java code. While 
developing several applications using XMLTalk, I have dis- 
covered several patterns in ValueModel connections that 
seem to occur in almost every application. 

A frequent scenario occurs when a user makes a selec- 
tion in a list of objects, triggering an update in multiple 
parts of the UI to reflect that selection. One example is a 
list of persons and a number of input fields displaying 
first and last names, and middle initial. The user can 
then edit these values and apply the change to the select- 
ed person by clicking an "Apply" button. Similarly, a 
"Reset" button should undo all the changes and retrieve 
the original values from the selected person. This entire 
scenario can be constructed using XMLTalk without writ- 
ing a single line of Java code to drive this interaction. 
Let's examine the models needed to implement this 
behavior in more detail. 

SelectionlnList. With Swing, the JList, JCombobox, 
JTable, and JTree widgets allow users to select an item 
within a list of items. With the exception of the JTree, 
all of these widgets in XMLTalk use the same model, 
a SelectionlnList that aggregates two ValueModels to 
create a new one. One of the ValueModels — the 
listHolder — is used to contain the list of items, while the 
other — the selectionHolder — is used to contain the cur- 
rently selected item. When users click an item in a 
Listbox, the SelectionlnList will call setValue on its 
selectionHolder. As a result, the selectionHolder will fire 
a PropertyChangeEvent. The reverse is also true. When 
the application changes the value contained in the 
selectionHolder, the Listbox will react by changing the 
visible selection highlight. If the application changes the 
content of the listHolder, the listbox will react by com- 
pletely repainting itself with the new content and reset- 
ting the selectionHolder. Note that the only programmat- 
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LISTING 2 



View definitions lor the Slider example 


</CONSTRAINTS> • 


<VIEWS> 


;</INPUTFIELD> 


: ; i<yiEW;narri^ 


<U^E : naiiie=T3 7 text^Extent 7> 


,::<IJffOUTMANAGER> 


<INPUTFIELD nm&W mbdeV , extent rt 


x <GRIDBAGLAYOUT/> 




</LAYOUTMANAGER> : 


type="Integer7> 


, <SCROLLBAR narae^verticalsaoir 




' : . : ' : ;modela"range^^^ v.-^F^i 


•• • ■■ i <nffitiTF®jj naroe=^ itioa;eV - va^e " ■ ! 


-'oite^ 


decimalformat^r . 


• DlockiriGrement== ,; 25'^ i 0 • • 


'{■ : i; tyjpe= "Integer'^ 


uiutihcrement=''5> ;, • 


<GONSTRADTTS> 


• <CONSTRAINTS> r' 


<GRIDBAG gndwidth= M REMAINDER'7> 




</COSSTRAINTS> ■[ 


filVTERTICAL" i - 


. j ^pUTFIELI)>; : 


weighty="1.07> 


; 1 ^UDERname?^ 


</CONSTRAINTS> 


orientation^ORIZONTAL" : : . 


</SCROLLBAR> 


• labels- true" . : : 


V <raOGREiSBAR;narafi^vertiGalPr^ 


ticks^tiue" track=''true'' 


• : mbdeli*range ? -'. : . ; ;.- r . 


y : i : major* M 25- minor="5^ filled^' -true" 


6^ntatibn= # ^TI(^ w : ■ : \ 


;V-::: ::;:-:^i:Snap="tniex>;'.: . • - 


pamtstnng="true''> 


<CONSTRAINT$> • : J : • • - ' 


' : \ : \ : . : <CONSTRAINTS> ! 


<GRD)BAG gridwidth= M R£MAINDER'' 


. <GRIDBAG gridheight= w REMAINDER w 


mi^'HORIZONTAL" 


fill="VERTICAL" 


• '■■ ;•: : weightx="l;07> '•. . 


weighty= w 1.07> 


</CONSTRAIMS> 'Mh^ ■■}<■':■' 


</CONSTRAINTS> ,'■ 


: </SUDER> 


1 </PROGRESSBAR> 


i: : ;:;5PR0GRESSBAR! name= • hpiizontalprpgress" : . • 


i; <SLIDER name="sUder jrat" model="range'' 


: -modeWrange". 


brienUtionr=^VERTICAL" • 


orientation="HORIZONTAL" 


: labels=*true''. 


: : paihtstring^true > 


tieks="true" track= M true w 


<CONSTRAINTS> 


. major= w 25* minor^S" fiiled="tiue" 


<GRIDBAG gridwidth="REMAINDER" 


: . . .. : snap=- trueV; 


ffll= M HORIZONTAL'' 


<CONSTRAINTS> . 


; weightx="1.07> 


<GRIDBAG fill="VERTIGAL' 


'if •; : <f/CQNSTR^S>. : 


weighty= "1.0" 
gridheight="REMAINDER7> 


</PROGRESSBAR> . 
: • • SCROLLBAR narae="horizontalscroir : ; 


. :;</CONSTRAINTS>:-: 


raodel^range'' 


; \' </SLIDER>; r 


onentauon=''HORIZONmi/' ';: 


<1ABEL nam^ir text= 'Min:7> • ; • 


bldckincrenieiit=''25" 


<INPUTFIELD name="fr modeWmiir 


UBitincrement="5 ff > . 




<G0NST3RAINTS> : 


: type^ lf Iiiteger7> • • : 


<GRIDBAG gridwidth=''REMAINDER" 


<LABEL name="l2" text="Max7> 


ffll^ORIZONTAL" 


: ; . <INPUTFIELD name="f2" modeWmax" 


' : weightx="1.07> 


.• dec^alfbnnat- : -## ^"!;" : " 


^</c6n?traints> 


.- ': type="integer"> ' ■ '•; 


. </SCROLlBAR> 


<CONSTRAINTS> . 

<GRIDBAG gridwidth= w REMAINDER7> 


</WN> 
</VEWS> 



ic interaction is between the application and the models, 
using the simple and consistent ValueModel interface. 
The application programmer is not required to know and 
understand the API of each individual widget. 

AspectAdaptor and BufFeredAspectAdaptor. Sometimes 
a widget needs to display only some property of an object. 
This is accomplished by using an AspectAdaptor, 2 
which is created with the name of a property (aspect). The 



AspectAdaptor implements its getValue() method by using 
reflection to translate the name of the property to an appro- 
priate getProperty method, following the standard Java 
beans naming conventions. For example, if the 
AspectAdaptor was created on aspect "firstName," it will 
call getFirstName() on its subject whenever the getValue() 
method is called. Similarly, it will call setFirstName (object) 
whenever the setValue method is called. 



20 Java-Report I October 2001 



http://www.javareport.com 



XSVILTALIC A FRAMEWORK FOR AUTOMATIC GUI RENDE&IIMG FROM XML SPECS 




Figure 3. Connecting SelectionlnUst and multiple BufferedAspectAdaptors. 



Often, a GUI will have several widgets that each display 
a different part (aspect) of the same subject. To facilitate this 
scenario, Aspect Adaptor has a subjectChannel, which is 
another ValueModel containing the subject for the 
AspectAdaptor. Whenever the contents of the subject 
Channel change, the AspectAdaptor will retrieve the new 
value for its aspect (for example, by calling getFirstName() in 
the previous example). It then fires a PropertyChangeEvent 
to indicate its value has changed. By sharing the same 
subjectChannel among several Aspect Adaptors, an entire 
GUI can be automatically updated whenever the content 
of the subjectChannel changes. In the above scenario, all 
the input fields showing firstName, lastName, and 
middlelnitial will automatically update themselves when a 
new Person object is stored in the shared subjectChannel. 

BufferedAspectAdaptor is a refinement of AspectAdaptor. 
Instead of directly updating the subject contained in the 
subjectChannel every time setValue() is called, it buffers 
the new value until it receives a PropertyChangeEvent 
from another ValueModel called the "triggerChannel." 
When the BufferedAspectAdaptor receives the event from 
the triggerChannel, it gets its value, and when it is 
Boolean.TRUE, it propagates the buffered value to its sub- 
ject. When the triggerChanners value is Boolean. FALSE, it 
retrieves the original value from the subject and signals to 
its views that the value has changed. This is used to undo 
a user's changes. Multiple BufferedAspectAdaptors often 
share a single triggerChannel, which is triggered by an 
apply-button or cancelled by a reset-button. This allows 
multiple changes to be committed to the subject or undone 
in a single shot. 

Pistfcmg II Ml ?&*jgth«r 

Now that we've seen the SelectionlnList and Buffered- 
AspectAdaptor models, let's connect them to implement 
the scenario described earlier. We have a list of Person 
objects displayed in a Listbox, and every time the user 
selects one, we want the contents of the firstName, last- 
Name, and middlelnitial input fields to automatically 
update. In addition, we want to be able to replace the user's 
changes with original values of the selected Person object. 
This scenario can be broken down as follows: 

• Update the displayed values in input fields when a selec- 
tion in a list changes. 

• Commit or Abort all the changes made in the input fields 
in a single shot. 

The first part indicates we want to use the 
SelectionlnList's selectionHolder as the subjectChannel 
of the input fields AspectAdaptor models. However, the 
second part indicates we want to use a Buffered- 
AspectAdaptor with a shared triggerChannel, and not an 
AspectAdaptor. Since a BufferedAspectAdaptor is a sub- 
class of AspectAdaptor, we can use a BufferedAspect- 
Adaptor everywhere we use an AspectAdaptor, so combin- 
ing both parts results in the following: 

• A Listbox has a SelectionlnList as its model. 

• The selectionHolder of the SelectionlnList is the 
subjectChannel for three BufferedAspectAdaptors. 

• The BufferedAspectAdaptors share a single triggerChannel. 



• The model for the three input fields are the Buffered- 
AspectAdaptors. 

Figure 3 illustrates the models and their connections, 
and Listing 3 shows how this is specified in the XML spec- 
ification. The application code only has to provide the con- 
tent for the listHolder of the SelectionlnList (implement 
the getPersonsQ method). Note that Figure 3 only shows 
two of the three BufferedAspectAdaptors for clarity. 

XMLTalk applications are reusable as components of 
other XMLTalk applications. Ideally, a component being 
reused should have no knowledge of the enclosing appli- 
cation or other components embedded in the enclosing 
application. But if components have no knowledge of 
each other, how then do they communicate with each 
other? To address this issue, XMLTalk introduces a new 

LISTING 3 

Example model connections 

<M0DELS> 

<VALUEHOLDER name="person7> 
<VALUEHOLDER name = M trigger7> 
<BUFFEREDASPECTADAFTOR 
aspect^ firstName" 

subjectChannel='*person v 
triggerChannel='trigger'7> 
• : <BUFFEREDASPECTADAPTOR ; : 
aspect^-lastName'; : 
name="lastName" 
.subjedteiiannel=-'person'' . 
triggerChannel=="trigger'7> 
<BUFFEREDASPECTADAPTOR 

aspect="rai" name="mi" 
subjectChanneW'person'' 
triggerGhannel= rf trigger7> 
<SELECTIONINLIST name= "persons" 
selectionHolder= "person" 
. . Ust="getPersons7> 
</M0DELS> • : 
v - . - — - - : J 
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concept called "ValueModel Promotion." Let's 
examine ValueModel Promotion by looking at 
another example. 

An XMLTalk application can choose to 
promote a ValueModel by specifying the pro- 
mote="true" attribute of the model specifica- 
tion. For example, a person editor might pro- 
mote its ValueModel containing the Person 
object being edited as: 

<VALUEHOLDER name = "person" promote="true7> 

XMLTalk uses this flag to publish the 
ValueModel to the enclosing application, mak- 
ing it a publicly accessible property of the 
embedded component. Some other embedded 
component might be used to select Person figure Q. ValueModel Promotion. 
objects from a list or table of Person objects. It 
will promote its ValueModel containing the currently 
selected Person object as: 




<VALUEHOLDER 

name = "selectedPeison" 

promote="true"/> 
<SELECTIONINLIST 
name = "persons" 

selectionholder="selectedPerson"/> 

At this point, the enclosing application has access 
to two promoted ValueModels. It can now use the 
delegatefor attribute to connect them together as follows: 

<VALUEHOLDER 

name="globalPerson" 
delegatefor = 
"appl.person,app2.selectedPersonV> 

The value of the delegatefor attribute indicates that the 
ValueModel serves as a delegate for the promoted "person" 
ValueModel in the embedded application named "appl" 
and for the promoted ValueModel named "selectedPerson" 
in the embedded application named "app2." The result of 
this connection is that the three ValueModels ("person," 
"selectedPerson," and "globalPerson") will behave as if 
they are one and the same ValueModel object. When the 
value of one of them changes, the value of the other two 
will change automatically. This allows embedded compo- 
nents to communicate with each other without even know- 
ing that the other one exists. Figure 4 illustrates the idea of 
ValueModel Promotion. 

XMLTalk enables rapid development of Uls and allows 
these Uls to be modified without the need for code 
changes or recompilation of the application code. It pro- 
motes reuse of these applications by facilitating compo- 
nent-based development and loose coupling of these com- 
ponents. To use XMLTalk successfully, developers have to 
acquire a slightly different mindset. They have to think of 



UI development as "circuit design," as if they are devel- 
oping a digital circuit using off-the-shelf components. As 
in circuit design, the behavior of an XMLTalk application 
is "in the wires" in the way the models are connected to 
each other and to the UI widgets. With some training and 
proper documentation, non-programmers can maintain 
the UI of an application. 

XMLTalk applications can be easily deployed to a 
large number of desktops, while still maintaining cen- 
tralized control of the UI, if the XML specifications are 
maintained in a central repository. A change to the UI 
does not imply a complete redeployment to all the 
installed desktops, unless actual application code was 
changed. The bulk of code in an XMLTalk application is 
the XMLTalk framework itself, which will change very 
infrequently, if at all. The XMLTalk framework can be 
deployed once, while applications can be redeployed as 
needed. However, most changes to the application will 
consist of changes to the XML specification, which does 
not require a redeployment of the code at all. I have suc- 
cessfully deployed the XMLTalk framework as an exten- 
sion to the JRE 1.3 and run XMLTalk applications as app- 
lets using the JRE as a plug-in to the browser. Because the 
framework is installed as an extension to the JRE, the 
applets themselves are extremely small. Often, entire 
applications are packaged in a jar of roughly 5KB, small- 
er than the average image on most Web sites. ® 

1. Specifically, the Visualworks Smalltalk user interface frame- 
works originally conceived by ParcPlace. 

2. The name " AspectAdaptor" is Smalltalk terminology. A more 
Java-centric name would have been "Property Adaptor." The 
author is currendy in the process of renaming most of the 
XMLTalk classes to be accessible to Java programmers. 

3. For more information on XMLTalk, visit http://www. 
trcinc.com. 

Frank Sauer is a infrastructure architect for the Technology 
Resource Connection, a wholly owned subsidiary of Perot Systems, 
in Tampa, FL He can be contacted at frank.sauer@trcinc.com. 
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